<template>
  <div class="message-dialog">
    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInDown"
      leave-active-class="animated fadeOutUp" >
      <!--v-if = "visible"-->
      <div class="dialog-ctrl" v-show="visible">
        <div class="dialog-content">
          {{txt}}
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'messageDialog',
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      time: 0,
      visible: this.value,
      txt: '',
      index: 1
    }
  },
  mounted () {
    // this.close();
  },
  methods: {
    close () {
      window.setTimeout(() => {
        this.visible = false
        console.log(this.index++)
      }, this.time)
    }
  },
  watch: {
    value: function (val) {
      this.visible = val
      if (val) {
        this.txt = this.$store.state.messageDialogObj.txt
        this.time = this.$store.state.messageDialogObj.time
        this.close()
      }
    },
    visible: function (val) {
      this.$emit('input', val)
    }
  }
}
</script>

<style scoped>

</style>
